在Vue.js中，实现路由跳转有多种方式，具体取决于你使用的Vue版本（Vue 2 或 Vue 3）以及Vue Router。以下是一些常见的方法：

Vue 2 + Vue Router

1. 使用 <router-link> 组件：

   <router-link to="/path/to/destination">Go to Destination</router-link>
   

2. 编程式导航：

   • 使用 this.$router.push：

     this.$router.push('/path/to/destination');
     

   • 使用 this.$router.replace（不会向历史记录中添加新记录，而是替换当前记录）：

     this.$router.replace('/path/to/destination');
     

   • 带查询参数或动态段：

     this.$router.push({ name: 'routeName', params: { id: 123 } });
     this.$router.push({ path: '/path/to/destination', query: { page: 1 } });
     

3. 使用 router.go 方法：

   • 前进或后退历史记录中的特定步数：

     this.$router.go(-1); // 后退一步
     this.$router.go(1);  // 前进一步
     

Vue 3 + Vue Router (组合式API)

在Vue 3中，虽然 <router-link> 和 router.push/router.replace 等方法仍然适用，但组合式API提供了一些新的方式，尤其是在使用 setup 函数时。

1. 使用 <router-link> 组件： 与Vue 2相同。

2. 编程式导航（在 setup 函数中）：

   • 使用 useRouter 和 useRoute：

     import { useRouter } from 'vue-router';
     
     export default {
       setup() {
         const router = useRouter();
     
         function navigateToDestination() {
           router.push('/path/to/destination');
         }
     
         return { navigateToDestination };
       }
     };
     

3. 使用 router.go 方法： 与Vue 2相同。

其他注意事项

• 动态路由匹配：你可以在定义路由时使用动态段（例如 /user/:id），然后在组件中通过 this.$route.params.id 或 route.params.id（在Vue 3中）访问这些参数。
• 路由守卫：Vue Router提供了全局、路由独享和组件内的守卫，可以在导航前后执行逻辑，例如权限检查、页面标题设置等。

总结

Vue.js中通过Vue Router实现路由跳转的方式主要包括使用 <router-link> 组件进行声明式导航，以及使用编程式导航（如 this.$router.push 和 this.$router.replace）。在Vue 3中，组合式API提供了更灵活的方式来访问和使用路由实例。无论使用哪种方式，都可以根据应用的需求灵活选择。